---
title: General
description: Typography is critical for communicating the hierarchy of a page
---

import Palette from "../../../components/Palette";

Always start by creating a clear hierarchy with the help of different sizes.
Only work with font weight and body text color if you need to emphasize something.

## Headings

Headings are used to show the content hierarchy
and are important for improving the reading experience for our users.

<ReactExample exampleId="Heading-types" />

### Colors

To stand out from the page, we use <InlineToken name="colorHeading" /> as the **only** heading color.

### Heading font sizes

| Type             | Size                                                  |
| ---------------- | ----------------------------------------------------- |
| Display Title    | <InlineToken name="headingDisplayFontSize" />         |
| Display Subtitle | <InlineToken name="headingDisplaySubtitleFontSize" /> |
| Title 0          | <InlineToken name="headingTitle0FontSize" />          |
| Title 1          | <InlineToken name="headingTitle1FontSize" />          |
| Title 2          | <InlineToken name="headingTitle2FontSize" />          |
| Title 3          | <InlineToken name="headingTitle3FontSize" />          |
| Title 4          | <InlineToken name="headingTitle4FontSize" />          |
| Title 5          | <InlineToken name="headingTitle5FontSize" />          |
| Title 6          | <InlineToken name="headingTitle6FontSize" />          |

### Basic guidelines for headings

<Guideline type="do" title="Be respectful of the content hierarchy">

Try not to skip heading levels.
If you've used level 1, the next level used, if intentionally smaller, should be level 2.

</Guideline>

<Guideline type="do" title="Use Display for the main page title">

A display heading is great for when you need to show an important title
at the top of more structured and content-heavy pages.

</Guideline>

<Guideline type="do" title="Use the same color for a heading and its connected icon">

When a heading requires the support of an icon, we recommend using the same color for both. It makes it easier to scan headings.

</Guideline>

<Guideline type="dont" title="Don't use Display and Title 1 on one page">

It can work in very specific cases,
but we usually don't combine Display and Level 1 headings on one page.

</Guideline>

<Guideline type="dont" title="Don't place a description below a Display heading">

The difference in the sizes of a Display heading and body text is too large.
This difference causes a feeling of disconnect between pieces of information.

If you need to show a short description with your title, use Display Subtitle.

</Guideline>

## Text styles

The most basic component for rendering text blocks.

<ReactExample exampleId="Text-types" />

### Colors for body text

<Palette colors={["colorTextPrimary", "colorTextSecondary"]} />

### Text font sizes

| Size   | Value                                     |
| ------ | ----------------------------------------- |
| Small  | <InlineToken name="fontSizeTextSmall" />  |
| Normal | <InlineToken name="fontSizeTextNormal" /> |
| Large  | <InlineToken name="fontSizeTextLarge" />  |

### Basic guidelines for text styles

<Guideline type="do" title="Always start with Normal Primary style">

When you need something more important, scale it up with font size or color.
When you need something less important, scale it down.

</Guideline>

<Guideline type="do" title="Use Large Primary in modals for the important description">

When you need to emphasize the description below a header,
Large Primary does the job well.

</Guideline>

<Guideline type="dont" title="Don't combine more than one size or color in one paragraph">

If you need to highlight some text, use the bold weight of the same style.

</Guideline>
